<template>
	<div>
		<el-row>
			<div class="login" :style="{marginTop:top+'px'}">
				<el-card class="card" style="text-align: center;padding: 20px;">
					<el-row>
						<div style="margin-top: 10px;margin-bottom: 30px;font-size: 25px;font-weight: 500;">系统登录</div>
					</el-row>
					<el-form ref="form" :model="form">
						<el-form-item>
							<el-input v-model="form.name" prefix-icon="iconfont icon-icon_boss" placeholder="请输入账号"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input type="password" v-model="form.password" prefix-icon="iconfont icon-password1" placeholder="请输入密码"></el-input>
						</el-form-item>
						<el-form-item>
							<el-row>
								<el-col :span="11">
									<el-input v-model="form.verifycode" placeholder="请输入验证码"></el-input>
								</el-col>
								<el-col :span="11" :offset="2">
									<img src="../assets/verifycode.png" width="100%" />
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item>
							<el-row>
								<el-col :span="4">
									<el-switch v-model="form.rememberme">
									</el-switch>
								</el-col>
								<el-col :span="11" :offset="2" style="text-align: left;">
									记住我
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item style="padding: 0;margin: 0;">
							<div>
								<el-row>
									<el-col :span="11">
										<el-button class="btn" @click="doreset">重置</el-button>
									</el-col>
									<el-col :span="11" :offset="2">
										<el-button type="primary" @click="login" class="btn">登录</el-button>
									</el-col>
								</el-row>
							</div>
						</el-form-item>
					</el-form>
				</el-card>
			</div>
		</el-row>
	</div>
</template>
<script>
	export default {
		mounted() {
			this.top = document.documentElement.clientHeight / 2 - 250;
		},
		data() {
			return {
				top: 20,
				form: {
					name: "",
					password: "",
					verifycode: "",
					rememberme: false
				}
			};
		},
		methods: {
			doreset: function() {
				this.form = {};
			},
			login: function() {
				this.$router.push("/home")
			}
		}
	}
</script>
<style>
	.login {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		vertical-align: middle;
	}
	
	.card {
		width: 400px;
		height: 450px;
	}
	
	.btn {
		width: 100%
	}
</style>